<template>
  <a-layout>
    <!-- 头部 -->
    <a-layout-header
      class="header"
      style="
        height: 60px;
        background-color: #fff;
        box-shadow: 0px 6px 10px 0px rgba(78, 89, 105, 6);
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div>
        <span class="logo">DiDiGO</span>
        <span class="title">滴滴购-后台统一管理平台</span>
      </div>
      <div class="rightGroup">
        <a-button shape="circle">
          <template #icon><SearchOutlined /></template>
        </a-button>
        <a-button shape="circle">
          <template #icon><bell-outlined /></template>
        </a-button>
        <a-button shape="circle">
          <template #icon><setting-outlined /></template>
        </a-button>
        <a-avatar :size="35">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </div>
    </a-layout-header>
    <a-layout>
      <!-- 侧菜单栏 -->
      <a-layout-sider width="200" style="background: #fff;">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          mode="inline"
          :style="{ height: '840px', borderRight: 0 }"
        >
          <a-menu-item key="1">
            <router-link to="/" replace >
              <text class="iconfont icon-cheliangguanli"></text>
              <span> 车辆管理 </span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link to="/facility" replace >
              <text class="iconfont icon-shebeizhuangtai"></text>
              <span>设备管理</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <router-link to="/advertising" replace>
              <text class="iconfont icon-guanggao"></text>
              <span>广告管理</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="4">
            <router-link to="/station" replace>
              <text class="iconfont icon-home"></text>
              <span>场站管理</span>
            </router-link>
          </a-menu-item>
          <a-sub-menu key="5">
            <template #icon>
              <text class="iconfont icon-yonghu" style="font-size: 23px"></text>
            </template>
            <template #title> <span>账号管理</span></template>
            <a-menu-item key="5"><router-link to="/account" replace>小程序账号</router-link></a-menu-item>
            <a-menu-item key="9"><router-link to="/account" replace>管理端账号</router-link></a-menu-item>
          </a-sub-menu>
          <a-menu-item key="6">
            <router-link to="/feedback" replace>
              <text class="iconfont icon-wentifankui"></text>
              <span>反馈问题管理</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="7">
            <router-link to="/record" replace>
              <text class="iconfont icon-caozuojilu"></text>
              <span>操作记录</span>
            </router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <!-- 内容 -->
      <a-layout style="padding: 2px 20px 20px">
        <router-view></router-view>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  SearchOutlined,
  BellOutlined,
  SettingOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    SearchOutlined,
    BellOutlined,
    SettingOutlined,
    UserOutlined,
  },
  setup() {
    return {
      selectedKeys: ref(["1"]),
    };
  },
});
</script>
<style>
/*每个页面公共css */
@import url("./static/fonts/iconfont.css");
.logo {
  width: 61px;
  height: 18px;
  color: rgba(0, 173, 25, 1);
  font-size: 28px;
  text-align: left;
  font-family: PMZDCuShuSong-regular;
  padding: 0 20px;
}
.title {
  width: 226px;
  height: 27px;
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  text-align: left;
  font-family: AlibabaPuHui-medium;
}
.rightGroup {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.iconfont {
  font-size: 23px;
  padding: 10px;
}
</style>

